.moon {
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin: auto;
  width:100px;
  height:100px;
  border-radius:50%;
  background:white;
  opacity:0.9;
  box-shadow: 0px 0px 40px 15px white;
  z-index:1;
}

.stars, .twinkl {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;
}

.stars {
  background:#000 url("../webroot/stars.png") repeat top center;
  z-index:0;
}

.twinkl{
  background:transparent url("../webroot/twinkling.png") repeat top center;
  z-index:0;

  -moz-animation:move-twink-back 200s linear infinite;
  -ms-animation:move-twink-back 200s linear infinite;
  -o-animation:move-twink-back 200s linear infinite;
  -webkit-animation:move-twink-back 200s linear infinite;
  animation:move-twink-back 200s linear infinite;
}

@keyframes move-twink-back {
  from {background-position:0 0;}
  to {background-position:-10000px 5000px;}
}
